<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>电影节</title>
  <link rel="stylesheet" href="//at.alicdn.com/t/font_1244015_taaw89pdwhh.css">
  <style>
    /* http://meyerweb.com/eric/tools/css/reset/
      v2.0 | 20110126
      License: none (public domain)
    */
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed,
    figure, figcaption, footer, header, hgroup,
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
      margin: 0;
      padding: 0;
      border: 0;
      font-size: 100%;
      font: inherit;
      vertical-align: baseline;
      font-family: SimHei;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section {
      display: block;
    }
    body {
      line-height: 1;
    }
    ol, ul {
      list-style: none;
    }
    blockquote, q {
      quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
      content: '';
      content: none;
    }
    table {
      border-collapse: collapse;
      border-spacing: 0;
    }
  </style>
  <style>
    .wrapper{
      width: 100%;
      max-width: 561px;
      position: relative;
      margin: auto;
      background-size: 100% auto;
      background-repeat: no-repeat;
      background-image: url("./images/filmDay-bg.jpg");

    }
    .wrapper::before{
      content: "";
      display: block;
      padding-top: 538.7%;
    }
    .back{
      width: 40px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      font-size: 20px;
      background: rgba(0, 0, 0, .4);
      border-radius: 50%;
      position: absolute;
      top: 15px;
      left: 10px;
      color: #fff;
    }
    .more{
      width: 16%;
      height: 1.2%;
      position: absolute;
      right: 1.2%;
      background: transparent;
    }
    .first-more{
      top: 20.8%;
    }
    .second-more{
      top: 47.89%;
    }
    .thrid-more{
      top: 74.9%;
    }
    .left-7{
      left: 6%;
    }
    .right-7{
      right: 6%;
    }
    .item{
      background: transparent;
      width: 40%;
      position: absolute;
      height: 9.8%;
      box-sizing: border-box;
      padding: 3% 5.07% 0;
    }
    .item .product-img{
      width: 100%;
      height: 59.99%;
      border-radius: 10px;
    }
    .item .name{
      font-size: 70%;
      font-weight: normal;
      color: #0190B2;
      margin: 1% 2% 0;
      line-height: 1.5;
      height: 20%;
      white-space: nowrap;
      transform: scale(0.8);
      margin-left: -13%;
    }
    .item .btn{
      background: -webkit-linear-gradient(#6FA1AC, #AACBC8); /* Safari 5.1 - 6.0 */
      background: -o-linear-gradient(#6FA1AC, #AACBC8); /* Opera 11.1 - 12.0 */
      background: -moz-linear-gradient(#6FA1AC, #AACBC8); /* Firefox 3.6 - 15 */
      background: linear-gradient(#6FA1AC, #AACBC8); /* 标准的语法（必须放在最后） */
      color: #fff;
      text-align: center;
      padding: 6.25% 0;
      border-radius: 5px;
      font-size: 74%;
      width: 87%;
      margin: 0 auto;
      white-space: nowrap;
      word-break: keep-all;
      word-wrap: normal;
    }
    .top-397{
      top: 23%;
    }
    .top-632{
      top: 34.2%;
    }
    .top-966{
      top: 50%;
    }
    .top-1202{
      top: 61.25%;
    }
    .top-1535{
      top: 77%;
    }
    .top-1770{
      top: 88.2%;
    }
    @media screen and (min-width: 560px) {
        .item .name{
            font-size: 100%;
            transform: scale(0.9);
            margin-left:-10%;
        }
        .item .btn{
          font-size: 100%;
        }
    }
  </style>
</head>
<body>
  <div class="wrapper">
    <div class="back iconfont" onclick="goBack()">&#xe61e;</div>
    <div class="more first-more" onclick="goList('722')"></div>
    <div class="item left-7 top-397" onclick="goDetail('177589')">
      <img src="./images/filmDay-1-1.png" alt=" " class="product-img">
      <p class="name">极米（XGIMI）Z6X 投影仪<br/>1080P全高清 亮度提升</p>
      <div class="btn">椰子分 3149.00</div>
    </div>
    <div class="item right-7 top-397" onclick="goDetail('129154')">
      <img src="./images/filmDay-1-2.png" alt=" " class="product-img">
      <p class="name">南通精英MR.RIGHT 120英寸<br/>16:9电动遥控幕 家庭影院</p>
      <div class="btn">椰子分 774.00</div>
    </div>
    <div class="item left-7 top-632" onclick="goDetail('37169')">
      <img src="./images/filmDay-1-3.png" alt=" " class="product-img">
      <p class="name">创维（SKYWORTH）43英寸4K<br/>全面屏畅销款 43H5</p>
      <div class="btn">椰子分 2184.50</div>
    </div>
    <div class="item right-7 top-632" onclick="goDetail('164636')">
      <img src="./images/filmDay-1-4.png" alt=" " class="product-img">
      <p class="name">坚果（JmGO）1895 电影机投<br/>影仪1080P 复古机械操作</p>
      <div class="btn">椰子分 7499.00</div>
    </div>
    <div class="more second-more" onclick="goList('841')"></div>
    <div class="item left-7 top-966" onclick="goDetail('169583')">
      <img src="./images/filmDay-2-1.png" alt=" " class="product-img">
      <p class="name">漫步者（EDIFIER）E235<br/>音箱 红色 </p>
      <div class="btn">椰子分 1874.00</div>
    </div>
    <div class="item right-7 top-966" onclick="goDetail('131086')">
      <img src="./images/filmDay-2-2.png" alt=" " class="product-img">
      <p class="name">JBL MS402 音响 HIFI音箱<br/> CD播放机 蓝牙音响</p>
      <div class="btn">椰子分 1979.00</div>
    </div>
    <div class="item left-7 top-1202" onclick="goDetail('170210')">
      <img src="./images/filmDay-2-3.png" alt=" " class="product-img">
      <p class="name">KEF LSX 高保真有源数字<br/>音响 无线蓝牙Hi-Fi立体声</p>
      <div class="btn">椰子分 8688.00</div>
    </div>
    <div class="item right-7 top-1202" onclick="goDetail('170279')">
      <img src="./images/filmDay-2-4.png" alt=" " class="product-img">
      <p class="name">Bose Solo 5 电视音响系统<br/>家庭影院 Soundbar回音壁</p>
      <div class="btn">椰子分 2400.00</div>
    </div>
    <div class="more thrid-more" onclick="goList('1590')"></div>
    <div class="item left-7 top-1535" onclick="goDetail('35803')">
      <img src="./images/filmDay-3-1.png" alt=" " class="product-img">
      <p class="name">诺思得其Nostalgia<br/>Electrics家用爆米花机</p>
      <div class="btn">椰子分 233.00</div>
    </div>
    <div class="item right-7 top-1535" onclick="goDetail('86003')">
      <img src="./images/filmDay-3-2.png" alt=" " class="product-img">
      <p class="name">乐事（Lay's）薯片休闲零<br/>食大礼包 718g整箱装</p>
      <div class="btn">椰子分 68.95</div>
    </div>
    <div class="item left-7 top-1770" onclick="goDetail('49556')">
      <img src="./images/filmDay-3-3.png" alt=" " class="product-img">
      <p class="name">华恺之星 休闲沙发 榻榻<br/>米 懒人坐垫8格</p>
      <div class="btn">椰子分 95.50</div>
    </div>
    <div class="item right-7 top-1770" onclick="goDetail('175102')">
      <img src="./images/filmDay-3-4.png" alt=" " class="product-img">
      <p class="name">韩束 净透亮白面贴膜<br/>24.6ml*15买10片赠5片</p>
      <div class="btn">椰子分 98.56</div>
    </div>
  </div>
  <script>
    function goList(id) {
      window.location.href = 'https://mall.cocogc.cn/#/goodsList?classfyId=' + id
    }
    function goDetail(id) {
      window.location.href = 'https://mall.cocogc.cn/#/goodsDetail/' + id
    }
    function goBack() {
      window.history.back()
    }
  </script>
</body>
</html>
